$(function () {
    var $ring = $(".ring"),
        $prize = $(".prize"),//转盘
        $btn = $(".pointer"),//按钮
        $change = $("#change"),//显示剩余抽奖机会
        $li = $(".scroll li"),//中奖信息滚动的盒子
        $sNum = $(".start-num"),//手机头号，三位数
        $eNum = $(".end-num"),//手机尾号，四位数
        $info = $(".info"),//中奖提示信息
        data = {count: 10},//次数
        bool = false,//判断是否在旋转，true表示是，false表示否
        timer,//定时器
        turnplate = {
            restaraunts:  ["500M流量1", "1G流量1", "50元话费", "20元话费", "300M流量","谢谢参与~", "20元话费", "300M流量","谢谢参与~"],//中奖提示, //大转盘奖品名称
            colors:["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"], //大转盘奖品区块对应背景颜色
            outsideRadius: '', //大转盘外圆的半径 192
            textRadius: '', //大转盘奖品位置距离圆心的距离 155
            insideRadius: '', //大转盘内圆的半径 68
            startAngle: 0, //开始角度
            bRotate: false //false:停止;ture:旋转
        };

  
    init();
    drawRouletteWheel();
    function init() {
        timer = setInterval(function () {
            $ring.toggleClass("light");
        }, 1000);
    }
     function rotateTimeOut() {
        $('#wheelcanvas').rotate({
            angle: 0,
            animateTo: 2160,
            duration: 8000,
            callback: function() {
                alert('网络超时，请检查您的网络设置！');
            }
        });
    };
     //旋转转盘 item:奖品位置; txt：提示语;
     function rotateFn(item, txt) {
        var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
        console.log("angles==",angles);
        if(angles < 270) {
            angles = 270 - angles;
        } else {
            angles = 360 - angles + 270;
        }
        $('#wheelcanvas').stopRotate();
        $('#wheelcanvas').rotate({
            angle: 0,
            animateTo: angles + 1800,
            duration: 8000,
            callback: function() {
                  win(txt);
                 
                  show(1, 1, txt);

               
                bool = !bool;
            }
        });
    };

    //点击抽奖
    $btn.click(function () {
        if (bool) return; // 如果在执行就退出
        bool = true; // 标志为 在执行
        if (data.count <= 0) { //当抽奖次数为0时
            $change.html(0);//次数显示为0
            bool = false;
            alert("没有次数了");
        } else { //还有次数就执行
            data.count--;
            data.count <= 0 && (data.count = 0);
            $change.html(data.count);//显示剩余次数
            $prize.removeClass("running");
            clickFn();
        }
    });

            
          
        //随机概率
         function clickFn() {
                       

                        //获取随机数(奖品个数范围内)
                        var item =6;
                       
                        //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
                      
                         switch (item) {
                            case 1:
                                rotateFn(item, turnplate.restaraunts[0]);
                                break;
                            case 2:
                                rotateFn(item, turnplate.restaraunts[1]);
                                break;
                            case 3:
                                rotateFn(item, turnplate.restaraunts[2]);
                                break;
                            case 4:
                                rotateFn(item, turnplate.restaraunts[3]);
                                break;
                            case 5:
                                rotateFn(item, turnplate.restaraunts[4]);
                                break;
                            case 6:
                                rotateFn(item, turnplate.restaraunts[5]);
                                break;
                            case 7:
                                rotateFn(item, turnplate.restaraunts[6]);
                                break;
                            case 8:
                                rotateFn(item, turnplate.restaraunts[7]);
                                break;
                            case 9:
                                rotateFn(item, turnplate.restaraunts[8]);
                                break;
                            case 10:
                                rotateFn(item, turnplate.restaraunts[9]);
                                break;
                        } 
        }


         function rnd(n, m) {
                var random = Math.floor(Math.random() * (m - n + 1) + n);
                return random;
            }

            //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    

            function drawRouletteWheel() {

                  var docWidth = document.documentElement.clientWidth;
                 var bodywidth = document.body.clientWidth;
                 var canvaswidth = parseInt(bodywidth * 1.2);
                if(canvaswidth%2 != 0){
                    canvaswidth++;
                }
                 var canvaswidth2 = parseInt(canvaswidth/2);
               
                turnplate.outsideRadius = parseInt (canvaswidth * 0.45);  
                turnplate.textRadius= parseInt (canvaswidth * 0.36); //大转盘奖品位置距离圆心的距离 155
                turnplate.insideRadius= parseInt (canvaswidth * 0.16);//大转盘内圆的半径 68
               
          
                var canvas = document.getElementById("wheelcanvas");
                console.log(canvas);
                canvas.width = canvaswidth;
                canvas.height = canvaswidth;
              
                if(canvas.getContext) {
                    //根据奖品个数计算圆周角度
                    var arc = Math.PI / (turnplate.restaraunts.length / 2);
                 
                    var ctx = canvas.getContext("2d");

                    //在给定矩形内清空一个矩形
                    ctx.clearRect(0, 0, canvaswidth, canvaswidth);
                    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
                    ctx.strokeStyle = "#FFBE04";
                    //font 属性设置或返回画布上文本内容的当前字体属性
                    var fsize = parseInt(canvaswidth * 0.03);
                    var Msize = parseInt(canvaswidth * 0.047);
                    ctx.font =  fsize + 'px Microsoft YaHei';
                    console.log(turnplate.restaraunts.length);
                    for(var i = 0; i < turnplate.restaraunts.length; i++) {
                        var angle = turnplate.startAngle + i * arc;
                        ctx.fillStyle = turnplate.colors[i];
                        ctx.beginPath();
                        //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
                        ctx.arc(canvaswidth2, canvaswidth2, turnplate.outsideRadius, angle, angle + arc, false);
                        ctx.arc(canvaswidth2, canvaswidth2, turnplate.insideRadius, angle + arc, angle, true);
                        ctx.stroke();
                        ctx.fill();
                        //锁画布(为了保存之前的画布状态)
                        ctx.save();
                        //----绘制奖品开始----
                        ctx.fillStyle = "#E5302F";
                        var text = turnplate.restaraunts[i];
                        //parseInt(canvaswidth * 0.04);
                        var line_height = parseInt(canvaswidth * 0.04);  //行高17
                        //translate方法重新映射画布上的 (0,0) 位置
                        ctx.translate(canvaswidth2 + Math.cos(angle + arc / 2) * turnplate.textRadius, canvaswidth2 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                        //rotate方法旋转当前的绘图
                        ctx.rotate(angle + arc / 2 + Math.PI / 2);

                        /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                        if(text.indexOf("M") > 0) { //流量包
                            var texts = text.split("M");
                            for(var j = 0; j < texts.length; j++) {
                                ctx.font = j == 0 ? 'bold ' + Msize + 'px Microsoft YaHei' : fsize + 'px Microsoft YaHei';
                                if(j == 0) {
                                    ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
                                } else {
                                    ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                                }
                            }
                        } else if(text.indexOf("M") == -1 && text.length > 6) { //奖品名称长度超过一定范围 
                            text = text.substring(0, 6) + "||" + text.substring(6);
                            var texts = text.split("||");
                            for(var j = 0; j < texts.length; j++) {
                                ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                            }
                        } else {
                            //在画布上绘制填色的文本。文本的默认颜色是黑色
                            //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                            ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                        }

                        //添加对应图标
                        if(text.indexOf("闪币") > 0) {
                            // var img = document.getElementById("shan-img");
                            // img.onload = function() {
                            //     ctx.drawImage(img, -15, 10);
                            // };
                            // ctx.drawImage(img, -15, 10);
                        } else if(text.indexOf("谢谢参与") >= 0) {
                            // var img = document.getElementById("sorry-img");
                            // // img.onload = function() {
                            // //     ctx.drawImage(img, -15, 10);
                            // // };
                            // ctx.drawImage(img, -15, 10);
                        }
                        //把当前画布返回（调整）到上一个save()状态之前 
                        ctx.restore();
                        //----绘制奖品结束----
                    }
                }
            }

    
    //中奖信息滚动。前两个参数为手机号前三位和后四位手机尾号，text为中的什么奖品
    function show(sNum, eNum, text) {
        //最新中奖信息
        $sNum.eq(2).html(sNum);
        $eNum.eq(2).html(eNum);
        $info.eq(2).html(text);
        $li.css("top", "-" + 40 / 75 + "rem");//滚动
        //滚动之后的处理
        setTimeout(function () {
            $li.css({
                "top": "0",
                "transition": "all 0s ease-in-out"
            });
            //更新中奖信息
            $sNum.eq(0).html($sNum.eq(1).html());
            $eNum.eq(0).html($eNum.eq(1).html());
            $info.eq(0).html($info.eq(1).html());
            $info.eq(1).html($info.eq(2).html());
            $sNum.eq(1).html($sNum.eq(2).html());
            $eNum.eq(1).html($eNum.eq(2).html());
        }, 500);
        $li.css("transition", "all 0.5s ease-in-out");
    }

    //中奖信息提示
    $("#close,.win,.btn").click(function () {
        $prize.addClass("running");
        init();
    });
});

